---
title: Utiliser des polices personnalisées
sidebar:
  label: Polices d'écriture
description: >-
  Vous souhaitez ajouter des polices d'écritures personnalisées à un site Astro ? Utilisez Google Fonts 
  avec Fontsource ou ajoutez une police de votre choix.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components'

Ce guide vous montrera comment ajouter des polices web à votre projet et les utiliser dans vos composants.

:::tip[API des polices expérimentale]
En savoir plus sur l'[API des polices expérimentale](/fr/reference/experimental-flags/fonts/) d'Astro qui vous permet d'utiliser des polices de votre système de fichiers et de divers fournisseurs de polices via une API unifiée, entièrement personnalisable et assurant la sûreté du typage.
:::

## Utilisation d'un fichier d'une police locale

Cet exemple illustrera l'ajout d'une police personnalisée en utilisant le fichier de police `DistantGalaxy.woff`.

<Steps>
1. Ajoutez votre fichier de police à `public/fonts/`.
2. Ajoutez la déclaration `@font-face` suivante à votre CSS. Cela peut être dans un fichier `.css` global que vous importez, un bloc `<style is:global>`, ou un bloc `<style>` dans une mise en page ou un composant spécifique où vous voulez utiliser cette police.

    ```css
    /* Enregistrer votre famille de polices personnalisée et indiquer au navigateur où la trouver. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    ```

3. Utilisez la valeur `font-family` de l'instruction `@font-face` pour mettre en forme les éléments de votre composant ou de votre mise en page. Dans cet exemple, le titre `<h1>` aura la police personnalisée appliquée, alors que le paragraphe `<p>` ne l'aura pas.

    ```astro title="src/pages/example.astro" {9-11}
    ---
    ---

    <h1>Dans une galaxie très, très lointaine...</h1>

    <p>Les polices personnalisées rendent mes titres beaucoup plus cool !</p>

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>
    ```
</Steps>

## Utilisation de Fontsource

Le projet [Fontsource](https://fontsource.org/) simplifie l'utilisation de Google Fonts et d'autres polices open source. Il fournit les modules npm que vous pouvez installer pour les polices que vous souhaitez utiliser.

<Steps>
1. Trouvez la police que vous souhaitez dans le [catalogue Fontsource](https://fontsource.org/fonts). Pour cet exemple, on utilisera la police [Twinkle Star](https://fontsource.org/fonts/twinkle-star).
2. Installez le paquet pour la police que vous avez choisie.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @fontsource/twinkle-star
      ```
      </Fragment>
    </PackageManagerTabs>

    :::tip
    Vous trouverez le nom du paquet correct dans la section « Quick Installation » (installation rapide) de chaque page de police sur le site de Fontsource. Il commence par `@fontsource/` ou `@fontsource-variable/` suivi du nom de la police.
    :::

3. Importez le paquet de polices dans le composant où vous souhaitez utiliser la police. Généralement, vous voudrez le faire dans un composant de mise en page commun pour vous assurer que la police est disponible sur l'ensemble de votre site.

    L'importation ajoutera automatiquement les règles `@font-face` nécessaires pour configurer la police.

    ```astro title="src/layouts/BaseLayout.astro"
    ---
    import '@fontsource/twinkle-star';
    ---
    ```

4. Utilisez le nom de la police comme indiqué dans l'exemple `body` sur sa page Fontsource comme valeur `font-family`. Cela fonctionnera partout où vous pouvez écrire du CSS dans votre projet Astro.

    ```css
    h1 {
      font-family: "Twinkle Star", cursive;
    }
    ```
</Steps>

Pour optimiser les temps de rendu de votre site Web, vous souhaiterez peut-être précharger les polices essentielles à l’affichage initial de la page.
Consultez le [guide Fontsource sur le préchargement des polices](https://fontsource.org/docs/getting-started/preload) pour plus d'informations et d'utilisation.

## Enregistrer des polices dans Tailwind

Si vous utilisez [Tailwind](/fr/guides/styling/#tailwind), vous pouvez utiliser l'une ou l'autre des méthodes précédentes de cette page pour installer votre police, avec quelques modifications. Vous pouvez soit ajouter une déclaration [`@font-face` pour une police locale](#utilisation-dun-fichier-dune-police-locale) ou utiliser la [stratégie `import` de Fontsource](#utilisation-de-fontsource) pour installer votre police.

Pour enregistrer votre police dans Tailwind :

<Steps>
1. Suivez l'un ou l'autre des guides ci-dessus, mais sautez l'étape finale qui consiste à ajouter `font-family` à votre CSS.
2. Ajoutez le nom de la police à `src/styles/global.css`.

    Cet exemple ajoute `Inter` à la pile de polices sans-serif.

    ```css title="src/styles/global.css" ins={3-5}
    @import 'tailwindcss';

    @theme {
      --font-sans: 'Inter', 'sans-serif'; 
    }
    ```

    Maintenant, tout le texte sans-serif (le texte par défaut de Tailwind) dans votre projet utilisera la police choisie et la classe `font-sans` appliquera également la police Inter.
</Steps>

Voir la documentation de [Tailwind sur l'ajout de polices personnalisées](https://tailwindcss.com/docs/font-family#using-custom-values) pour plus d'information.

## Plus de ressources

- Apprendre comment fonctionnent les polices web dans le [Guide des polices web de MDN](https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts).
- Générez du CSS pour votre police avec [le générateur de polices web de Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator).
